import React, {Component} from 'react'
import {Layout, message, Tabs, Input, Select, Button, Menu, Table} from 'antd';
import {connect} from 'react-redux'
import axios from 'axios'
import './aboutme.styl'
import Approve from './approve'
import {updateUserInfo, loadData} from '../../actions/user.redux'
import empty from './empty.png'
import UpdatePwd from './updatePwd'

const TabPane = Tabs.TabPane;
const {Content, Sider} = Layout;

@connect(
  state => state.user,
  {updateUserInfo, loadData}
)
class aboutMe extends Component {
  constructor(props) {
    super(props)
    this.state = {
      itemShow: 0,
      approvalList: [],
      getindustryList: [],
      userName: this.props.userName,
      phone: this.props.phone,
      email: this.props.email,
      organizationName: this.props.organizationName,
      selects: [],
      tabIndex: 0,
      visible: false
    }
    this.saveInfo = this.saveInfo.bind(this)
    this.handleChage = this.handleChage.bind(this)
    this.limitPhone = this.limitPhone.bind(this)
    this.queryApproval = this.queryApproval.bind(this)


  }

  saveInfo() {
    this.props.updateUserInfo(this.state)
  }

  async queryApproval() {
    let res = await axios.post('vrv-monitor-platform-web/popularfeelingsDispose/query', {
      pageNum: 1,
      pageSize: 200
    })
    this.setState({
      approvalList: res.data.data
    })
  }

  handleChage(k, v) {
    this.setState({
      [k]: v
    })
  }

  limitPhone(phone) {
    return phone && phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
  }

  hideModal = () => {
    this.setState({
      visible: false
    })
  }

  componentWillMount() {
    this.setState({
      tabIndex: this.props.location.id
    })
  }

  componentDidMount() {
    this.queryApproval()
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      userName: nextProps.userName,
      phone: nextProps.phone,
      email: nextProps.email,
    })
  }

  render() {
    const columns = [{
      title: '事件内容',
      dataIndex: 'cont',
      key: 'cont'
    }, {
      title: '提交人',
      dataIndex: 'referMan',
      key: 'referman',
    }, {
      title: '提交时间',
      dataIndex: 'referTime',
      key: 'referTime',
    }, {
      title: '审批时间',
      dataIndex: 'approvalTime',
      key: 'approvalTime',
    }, {
      title: '备注',
      dataIndex: 'remarks',
      key: 'remarks',
    }]
    const data = this.state.approvalList && this.state.approvalList.map((d, i) => {
      return {
        key: i + 1,
        popularfeelingsStatus: d.popularfeelingsStatus,
        cont: d.popularfeelingsTitle,
        referMan: d.createName,
        referTime: d.createTime,
        approvalTime: d.approveTime,
        remarks: d.popularfeelingsOpinion
      }
    })
    return (
      <Tabs defaultActiveKey={this.state.tabIndex} className='m-about'>
        {this.props.msg && message.info(this.props.msg)}
        <TabPane tab="个人资料" key="1">
          <div className='personal'>
            <div className='item'>
              <div className='label'>用户名:</div>
              <Input placeholder="请输入用户名" disabled={this.props.edit} value={this.state.userName} onChange={(v) => {
                this.handleChage('userName', v.target.value)
              }}/>
            </div>
            <div className='item'>
              <div className='label'>注册手机:</div>
              <Input placeholder="输入用户手机号" disabled={this.props.edit} value={this.limitPhone(this.state.phone)}
                     onChange={(v) => {
                       this.handleChage('phone', v.target.value)
                     }}/>
              <span onClick={() => {
                this.setState({visible: true})
              }}>修改密码</span>
            </div>
            <div className='item'>
              <div className='label'>邮箱:</div>
              <Input placeholder="请输入邮箱" disabled={this.props.edit} value={this.state.email} onChange={(v) => {
                this.handleChage('email', v.target.value)
              }}/>
            </div>
            <div className='item'>
              <div className='label'>单位名称:</div>
              <Input placeholder="请输入单位名称" disabled value={this.state.organizationName}/>
            </div>
            <div className='item'>
              <div className='label'>单位性质:</div>
              <Select
                disabled
                value={this.props.industryInvolved}
                style={{width: 229}} size='large'>
              </Select>
            </div>
            {!this.props.edit ? <Button type="primary" onClick={this.saveInfo}>保存</Button> :
              <Button type="primary" onClick={
                v => this.props.loadData({edit: false})
              }>编辑个人资料</Button>}
          </div>
          {
            this.state.visible ?
              <UpdatePwd onHide={this.hideModal}/> : ''
          }
        </TabPane>
        <TabPane tab="我的审批" key="2" className='approve'>
          <Layout>
            <Sider style={{background: '#fff'}}>
              <Menu mode="inline" defaultSelectedKeys={['0']} style={{height: "100%"}} onClick={({key}) => {
                this.setState({
                  itemShow: key,
                })
              }}>
                <Menu.Item key="0">待审批</Menu.Item>
                <Menu.Item key="1">已审批</Menu.Item>
                <Menu.Item key="2">已驳回</Menu.Item>
              </Menu>
            </Sider>
            <Content style={{background: '#fff'}}>
              {this.state.approvalList && parseInt(this.state.itemShow,0) === 0 ?
                <Approve queryApproval={this.queryApproval} List={this.state.approvalList}/> : null}
              {parseInt(this.state.itemShow,0) === 1 ?
                <Table columns={columns} dataSource={data.filter(d => d.popularfeelingsStatus === '1')}/> : null}
              {parseInt(this.state.itemShow,0) === 2 ?
                <Table columns={columns} dataSource={data.filter(d => d.popularfeelingsStatus === '0')}/> : null}
            </Content>
          </Layout>
        </TabPane>
        <TabPane tab="我的素材库" key="3">
          <img className='empty' src={empty} alt='空空'/>
        </TabPane>
      </Tabs>
    )
  }
}

export default aboutMe